﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Message.aspx.cs" Inherits="Chat_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>私信</title>
    <style type="text/css">
        #iframe1{left:0px;width:600px;height:300px;}
        #iframe2{bottom:0px;width:600px;height:190px;}
    </style>    
    <style>
        .bigborder{
            height:600px;width:800px;
            margin-left:215px;
            border-color:grey;border-width:1px;border-top-style:solid;
        }
        .nevigation{
             height:69px;width:800px;
            border-color:grey;border-width:2px;border-style:solid;
        }
        .content1{
            height:40px;width:800px;
            border-color:grey;border-width:1px;border-style:solid;
            margin-top:12px;
            display:flex;
        }
        .content2{
            height:490px;width:800px;
            display:flex;
        }
        .content3{
             height:490px;width:600px;
        }
        .content-top{
            height:40px;width:200px;
            border-color:grey;border-width:1px;border-style:solid;
        }
        .content-name{
            height:40px;width:600px;
            border-color:grey;border-width:1px;border-style:solid;
            float:right;
        }
        .content-list{
            height:490px;width:200px;
            border-color:grey;border-width:1px;border-style:solid;
            overflow:auto;
        }
        .content-msg{
            height:300px;width:600px;
            border-color:grey;border-width:1px;border-left-width:0px;border-style:solid;
            overflow:auto;
        }
        .content-input{
            height:190px;width:600px;
            border-color:grey;border-width:1px;border-left-width:0px;border-top-width:0px;border-style:solid;
        }
        .inputphoto{
            margin-top:6px;margin-left:6px;
        }
        .inputtext{
            border-width:1px;height:100px;width:588px;
            margin-left:6px;margin-top:6px;
        }
        .sendbtn:hover{
            color:green;
            color:green;
        }
        .sendbtn{
            margin-top:6px;margin-left:547px;
        }
        .person:hover{
            background-color:lightgrey;
        }
        .person{
            width:200px;height:54px;
            border-bottom: 3px solid gainsboro;
        }
        .profile{
            height:40px;width:40px;
            border-radius:50%;
            margin-left:6px;margin-top:6px
        }
        .name{
            margin-top:30px;
        }
        .chatcontent{
            width:auto;height:auto;margin-left:60px;margin-right:60px;
            display:inline-block !important; 
            display:inline; 
            border-style:solid;border-color:grey;border-width:1px;border-radius:10px;border-top-left-radius:0px;
            float:left;
        }
        .mychatcontent{
           width:auto;height:auto;margin-left:60px;margin-right:60px;
            display:inline-block !important; 
            display:inline; 
            border-style:solid;border-color:grey;border-width:1px;border-radius:10px;border-top-right-radius:0px;
                        float:right;
        }
        .hisprofile{
            height:40px;width:40px;
            border-radius:50%;
            margin-right:550px;margin-top:6px;margin-left:12px;
        }
        .myprofile{
            height:40px;width:40px;
            border-radius:50%;
            margin-left:550px;margin-top:6px;
        }
    .chatbtn:hover{
        background-color:#3ccf15;
        background-color:#3ccf15;
    }
    .chatbtn{
        height:64px;width:64px;
        border-radius:50%;border-color:gainsboro;
        color:black;
        font-size:10px;
        background-color:#3ccf15;
        margin-left:50px;

    }
    .likemebtn:hover{
        background-color:#3ccf15;
        background-color:#3ccf15;
    }
    .likemebtn{
        height:64px;width:64px;
        border-radius:50%;border-color:gainsboro;
        color:black;
        font-size:10px;
        background-color:white;
        margin-left:40px;
    }
    .noticebtn:hover{
        background-color:#3ccf15;
        background-color:#3ccf15;
    }
    .noticebtn{
        height:64px;width:64px;
        border-radius:50%;border-color:gainsboro;
        color:black;
        font-size:10px;
        background-color:white;
        margin-left:40px;
    }
    .backbtn:hover{
         background-color: #3ccf15;
         background-color: #3ccf15;
    }
    .backbtn{
        height:40px;width:40px;
        border-radius:50%;border-color:white;
        color:black;
        font-size:20px;
        background-color:white;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            
        <div class="bigborder">
        <div class="nevigation">
             <span>
             <a href="../Default.aspx"><input type="button" value="< 0" class="backbtn"/></a>
             </span> 
             <span>
                 <a href="Message.aspx"><input type="button" value="私信" class="chatbtn"/></a>
             </span> 
             <span>
                 <a href="Likeme.aspx"><input type="button" value="收藏我的" class="likemebtn"/></a>
             </span> 
             <span>
                 <a href="Notice.aspx"><input type="button" value="系统通知" class="noticebtn"/></a>
             </span>  
        </div>

        <div class="content1">
            <div class="content-top">
                <div style="font-size:10px; margin-left:10px; margin-top:10px;">聊天列表</div>
            </div>
            <div class="content-name">
              <div style="font-size:10px; margin-left:290px; margin-top:10px;">库里</div>
            </div>
        </div>

        <div class="content2">
            <div class="content-list">
                <div class="person">
                    <a href="#"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3253265426,2923163873&fm=26&gp=0.jpg" class="profile"/></a>
                    <span class="name">库里</span>
                </div>     
            </div>

            <div>
                <div class="content-msg">
                    <iframe id="iframe1" src="ShowMessage.aspx"></iframe>
                        
                </div>
                <div class="content-input">
                    <iframe id="iframe2" src="SendMessage.aspx"></iframe>           
                </div>
            </div>
         </div>
       </div>
            <asp:Button ID="btn" runat="server" Text="返回上一页" OnClick="Back" />
    <script>
        const btn=document.querySelectorAll(".sendbtn");
        btn.onclick = () => {
            mychatcontent.textContent=inputtext.textContent;
        }
    </script>
        </div>
    </form>
</body>
</html>
